<template>
  <div>
    <a-row :gutter="24">
      <!-- <a-col :lg="24" :md="24" :sm="24">
        <div class="affixBox" @click="doAdd">+  发布公告</div>
      </a-col>-->
      <a-col :lg="24" :md="24" :sm="24">
        <a-card :bordered="false">
          <div class="operate">
            <a-button type="dashed" style="width: 100%" icon="plus" @click="doAdd">添加账号</a-button>
          </div>
          <a-divider />
          <div class="examin_table">
            <a-table
              :columns="columns"
              :rowKey="userList => userList.record_id"
              :dataSource="userList"
              :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
              :loading="loading"
              @change="handleTableChange"
              :pagination="pagination">
              <div slot="status" slot-scope="row">
                <a-switch :default-checked="row.status==1?true:false" @change="statusChange($event,row.record_id)" />
              </div>
              <div slot="active" slot-scope="row">
                <span class="goodsurl " @click="doedit(row)">改</span>
                <a-popconfirm title="确定删除吗?" ok-text="删除" cancel-text="取消" @confirm="delExamineInfo(row.record_id)">
                  <span class="goodsurl quan">删</span>
                </a-popconfirm>
              </div>
            </a-table>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-modal
      :title="isadd===true?'添加审核账号':'修改审核账号'"
      :visible="visible"
      :width="600"
      :height="500"
      :confirmLoading="confirmLoading"
      @ok="dochange()"
      @cancel="handleCancel">
      <a-card :bordered="false">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          class="form_box">
          <a-form-model-item label="手机号" ref="phone" prop="phone">
            <a-input
              v-model="form.phone"
              placeholder="请输入手机号"
              @blur="
                () => {
                  $refs.phone.onFieldBlur();
                }
              " />
          </a-form-model-item>
          <a-form-model-item label="密码" ref="password" prop="password">
            <a-input
              v-model="form.password"
              placeholder="请输入密码"
              @blur="
                () => {
                  $refs.password.onFieldBlur();
                }
              " />
          </a-form-model-item>
          <a-form-model-item label="开始时间">
            <a-time-picker v-model="start_time" format="HH:mm" @change="startChange" />
          </a-form-model-item>
          <a-form-model-item label="结束时间">
            <a-time-picker v-model="end_time" format="HH:mm" @change="endChange" />
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </a-modal>
  </div>
</template>

<script>
  import {
    getExamineList,
    addExamineUser,
    updateUserInfo,
    delExamineInfo,
    updateExamineStatus
  } from '@/api/examine'
  import moment from 'moment'

  const columns = [{
      title: 'id',
      dataIndex: 'id'
    },
    {
      title: '账号',
      dataIndex: 'phone'
    },
    {
      title: '开始时间',
      dataIndex: 'start_time'
    },
    {
      title: '结束时间',
      dataIndex: 'end_time'
    },
    {
      title: '分配总数',
      dataIndex: 'all_num'
    },
    {
      title: '今日分配数',
      dataIndex: 'num'
    },
    {
      title: '审核总数',
      dataIndex: 'sh_num'
    },
    {
      title: '今日审核数',
      dataIndex: 'count'
    },
    {
      title: '待审核数',
      dataIndex: 'dsh_num'
    },
    {
      title: '账号状态',
      align: 'center',
      scopedSlots: {
        customRender: 'status'
      }
    },
    {
      title: '操作',
      align: 'center',
      scopedSlots: {
        customRender: 'active'
      }
    }
  ]
  export default {
    components: {
      getExamineList,
      addExamineUser,
      columns
    },
    name: 'NoticeMan',
    data () {
      return {
        isadd: false,
        labelCol: {
          span: 4
        },
        wrapperCol: {
          span: 20
        },
        pagination: {
          pageSize: 15,
          page: 1
        },
        confirmLoading: false,
        visible: false,
        selectedRowKeys: [],
        loading: false,
        userList: [],
        columns,
        form: {
          record_id: '',
          phone: '',
          password: '',
          start_time: '',
          end_time: ''
        },
        rules: {
          phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          start_time: [{
            required: true,
            message: '请输入开始时间',
            trigger: 'blur'
          }],
          end_time: [{
            required: true,
            message: '请输入结束时间',
            trigger: 'blur'
          }]
        },
        start_time: '',
        end_time: ''
      }
    },

    computed: {
      hasSelected () {
        return this.selectedRowKeys.length > 0
      }
    },
    created () {
      // this.getExamineList()
    },
    mounted () {
      this.getExamineList()
    },
    methods: {
      moment,
      statusChange (event, id) {
        console.log(event, id)
        updateExamineStatus({
          id_str: id,
          type: event === true ? 1 : 2
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('修改成功!')
          } else {
            this.$message.info(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      onSelectChange (selectedRowKeys) {
        // console.log('selectedRowKeys changed: ', selectedRowKeys)
        this.selectedRowKeys = selectedRowKeys
      },
      // 删除账号
      delExamineInfo (id) {
        console.log(id)
        let idstr = ''
        if (this.selectedRowKeys.length > 0) {
          idstr = this.selectedRowKeys.join(',')
        } else {
          idstr = id
        }
        console.log(idstr)
        delExamineInfo({
            del_id: idstr
          })
          .then(res => {
            if (res.code === 200) {
              console.log('返回', res)
              this.getExamineList()
              this.$message.success('删除成功!')
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },

      endChange (date, dateString) {
        // console.log(date, dateString)
        this.form.end_time = dateString.split(':').join('.')
        // console.log(this.form.end_time)
      },
      startChange (date, dateString) {
        // console.log(date, dateString)
        this.form.start_time = dateString.split(':').join('.')
        // console.log(this.form.start_time)
      },
      dochange () {
        console.log(this.form)
        if (this.isadd === true) {
          addExamineUser(this.form).then(res => {
            // console.log('新增返回', res)
            if (res.code === 200) {
              this.$message.success('新增成功!')
              this.handleCancel()
              this.getExamineList(1, 15)
            } else {
              this.$message.info(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          updateUserInfo(this.form).then(res => {
            // console.log('修改返回', res)
            if (res.code === 200) {
              this.$message.success('修改成功!')
              this.handleCancel()
              this.getExamineList(1, 15)
            } else {
              this.$message.info(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      },
      doedit (row) {
        console.log(row)
        this.form = row
        // this.start_time = row.start_time.split('.').join(':')
        this.start_time = moment(row.start_time.split('.').join(':'), 'HH:mm')
        this.end_time = moment(row.end_time.split('.').join(':'), 'HH:mm')
        // this.form.record_id = row.record_id
        this.isadd = false
        this.visible = true
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getExamineList(params.page, 15)
      },
      onStartChange (date, dateString) {
        this.startTime = dateString
      },
      onEndChange (date, dateString) {
        this.endTime = dateString
      },
      doAdd () {
        this.isadd = true
        this.visible = true
      },
      handleCancel () {
        this.form = this.$options.data().form
        this.visible = false
      },

      del (val) {
        var that = this
        this.$confirm({
          title: '确定删除吗?',
          content: '',
          okText: '删除',
          okType: 'danger',
          cancelText: '取消',
          onOk () {
            that.delNotice(val)
            console.log('OK', val)
          },
          onCancel () {
            console.log('Cancel')
            that.$message.info('取消删除!')
          }
        })
      },

      setOwner () {
        const {
          form: {
            setFieldsValue
          }
        } = this
        setFieldsValue({
          owner: ['wzj']
        })
      },
      getExamineList () {
        this.loading = true
        getExamineList()
          .then(res => {
            // console.log(res)
            this.userList = res.data.data
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.loading = false
          })
          .catch(() => {
            this.loading = false
            console.log('null')
          })
      },
      getAddNotice (title, msg) {},
      delNotice (msgId) {}
    }
  }
</script>
<style lang="less" scoped>
  // p{
  //   color:rgb(189, 188, 188)
  // }

  .examin_table {
    .goodsurl {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 28px;
      background-color: #fff;
      margin-left: 10px;
      color: #000;
      font-size: 18px;
      // font-weight: bolder;
      text-align: center;
      border-radius: 50%;
      // padding: 5px;
      color: gray;
      cursor: pointer;
      border: 1px solid gray;
    }

    .ant-table-row:hover {
      .goodsurl {
        background-color: green;
        color: #fff;
        // font-weight: bolder;
        border: none;
      }

      .quan {
        background-color: orange;
      }
    }
  }
</style>
